<template>
	<view class="report">
			<view class="nav">
				<van-nav-bar title="我的报道" custom-style="background-color: #ff6358;padding-top:0px;"
					style="background-color: #ff6358;color: #fff;" title-class="color: #fff;" left-arrow
					@click-left="onClickLeft" />
			</view>
		  <van-field required :value="form.housing" label="报道小区" placeholder="请选择报道小区" is-link v-show="!status"/>
		  <van-field required :value="form.organization" label="报道组织" placeholder="选择小区后自动获取" error/>
		  <van-field :value="form.abode" label="报道类型"/>
		  <van-field required :value="form.name" label="姓名" placeholder="请 输入姓名"/>
		  <van-cell title="性别" clickable>
				<van-radio-group :value="form.sex" >
				    <van-radio :disabled='status' style='display: inline-block;margin-right: 1rem;' name="1">男</van-radio>
				    <van-radio :disabled='status' style='display: inline-block;' name="2">女</van-radio>
				</van-radio-group>
		<!-- </van-cell-group> -->
		  </van-cell>
		  <van-field required :value="form.phone" label="手机号" placeholder="请输入手机号"/>
		  <van-cell-group v-show="!status">
		    <van-field :value="form.msg" center required clearable label="短信验证码" 
			placeholder="请输入短信验证码" use-button-slot>
		      <van-button slot="button" size="small" type="primary">
		        发送验证码
		      </van-button>
		    </van-field>
		  </van-cell-group>
		  <van-field required :value="form.housing" label="工作单位" placeholder="请选择工作单位" is-link/>
		  
		  <view class="gridfixation">
			  <view @click="goToIndex">
				  <van-icon size="2rem" name="home-o"/>
				  <view>首页</view>
			  </view>
			  
			  <view v-if="!status">
				  <van-button style='margin-right: 1rem;' round type="danger">确认</van-button>
				  <van-button round type="danger" @click='cancel'>取消</van-button>
			  </view>
			  <view v-else>
				  <van-button round type="danger" disabled>已报道</van-button>
			  </view>
		  </view>
	</view>
</template>

<script>
export default{
	data(){
		return {
			form:{
				housing:'',
				organization:'',
				abode:'居住地报道',
				name:'',
				sex:'1',
				phone:'',
				msg:"",
			},
			status:false,  // 控制底部和表单显示隐藏
		}
	},
	methods:{
		cancel:()=>uni.navigateBack(),
		goToIndex:()=>uni.switchTab({url:'/pages/index/index'}),
		onClickLeft:()=>uni.navigateBack()
		
	},
}
</script>

<style lang='less' scoped>
	.report{
		
	}
	.nav{
		::v-deep .van-nav-bar{
			padding-top: 0 !important;
			background: #fd6458;
		}
		::v-deep .van-icon {
			color: white !important;
		}
		::v-deep .van-nav-bar__title {
			color: white !important;
		}
	}
	.gridfixation{
		border: 1px solid #ccc;
		position: fixed;
		width: 100%;
		height: 4rem;
		display: flex;
		bottom: 0;
		>view:first-child{
			width: 30%;
			padding: 3%;
			text-align: center;
			/* background: red; */
			border-right: 1px solid #ccc;
		}
		>view:last-child{
			width: 70%;
			/* background: blue; */
/* 			display: flex;
			justify-content: space-between; */
			padding: 3%;
			/deep/ .van-button{
				width: 45%;
			}
		}
		::v-deep .van-button--disabled{
			width: 100% !important;
		}
	}
</style>
